<template>
	<div class="margin-top">
		<!-- 生产实绩 -->
		<div class="flex">
			<div class="produc-l bg-blue-furn">
				<div class="solid-bottom padding-tb padding-lr-lg text-lg">
					时间
				</div>
				<div class="padding-lr-lg padding-bottom-lg">
					<div class="flex align-center margin-top-lg">
						<div class="time-title">到达受包位</div>
						23-06-20 22:53:53
					</div>
					<div class="flex align-center margin-top-lg">
						<div class="time-title">到达浇注位</div>
						23-06-20 22:53:53
					</div>
					<div class="flex align-center margin-top-lg">
						<div class="time-title">水口打开</div>
						23-06-20 22:53:53
					</div>
					<div class="flex align-center margin-top-lg">
						<div class="time-title">浇注完成</div>
						23-06-20 22:53:53
					</div>
					<div class="flex align-center margin-top-lg">
						<div class="time-title">钢包吊走</div>
						23-06-20 22:53:53
					</div>
					<div class="flex align-center margin-top-lg">
						<div class="time-title">切割尧成</div>
						23-06-20 22:53:53
					</div>
				</div>
			</div>

			<div class="flex-sub bg-blue-furn margin-left hidden">
				<div class="solid-bottom padding-tb padding-lr-lg text-lg">
					重量
				</div>
				<div class="flex padding-lr-lg padding-bottom-lg">
					<div class="produc-r-l el-input-num">
						<div class="flex align-center margin-top-lg">
							<div class="time-title2">浇注重量</div>
							<div>
								131.478
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="time-title2">上台重量</div>
							<div class="">
								<el-input-number v-model="num1" controls-position="right"></el-input-number>
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="time-title2">中包重量 1#</div>
							<div class="">
								<el-input-number v-model="num2" controls-position="right"></el-input-number>
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="time-title2">离台重量</div>
							<div class="">
								<el-input-number v-model="num3" controls-position="right"></el-input-number>
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="time-title2">中包重量 1#</div>
							<div class="">
								<el-input-number v-model="num4" controls-position="right"></el-input-number>
							</div>
						</div>
					</div>
					<div class="flex-sub margin-left">
						<div class="text-lg margin-top">炉次损失</div>
						<div class="flex padding margin-top bg-blue-title">
							<div class="flex-sub text-center">损失名称</div>
							<div class="flex-sub text-center">损失重量</div>
							<div class="flex-sub text-center">编辑</div>
						</div>

						<div class="flex" v-for="(item, index) in weightList" :key="index">
							<div class="produc-r-r-tb flex-sub text-center">{{item.name}}</div>
							<div class="produc-r-r-tb flex-sub text-center" v-if="!item.type">{{item.num}}</div>
							<div class="produc-r-r-tb flex-sub text-center" v-else>
								<input v-model="weightValue" placeholder="请输入" class="produc-input text-green2" autofocus />
							</div>
							<div class="produc-r-r-tb flex-sub text-center cursor" @click="weightClick(item)">{{item.type ? '保存' : '编辑'}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 其他信息 -->
		<div class="produc-l bg-blue-furn margin-top el-input-num" style="height:calc(100vh - 790px); min-height: 430px;">
			<div class="solid-bottom padding-tb padding-lr-lg text-lg">
				其他信息
			</div>
			<div class="flex align-center padding-tb-lg padding-lr-xl">
				<div class="flex-sub margin-right">
					<div>到台温度</div>
					<div class="margin-top">
						<el-input-number v-model="num2" controls-position="right"></el-input-number>
					</div>
				</div>
				<div class="flex-sub margin-lr">
					<div>钢种</div>
					<div class="margin-top">
						<el-input placeholder="" />
					</div>
				</div>
				<div class="flex-sub margin-lr">
					<div>钢包</div>
					<div class="margin-top">
						<el-input placeholder="" />
					</div>
				</div>
				<div class="flex-sub margin-lr">
					<div>异钢种连浇</div>
					<div class="margin-top">
						<el-select v-model="selectVal1" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="flex-sub margin-lr">
					<div>烧氧数量</div>
					<div class="margin-top">
						<el-input placeholder="" />
					</div>
				</div>
				<div class="flex-sub margin-lr">
					<div>更换中包</div>
					<div class="margin-top">
						<el-select v-model="selectVal2" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="flex-sub margin-left">
					<div>漏钢</div>
					<div class="margin-top">
						<el-select v-model="selectVal3" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
			</div>
			<div class="margin-top padding-left-lg">描述</div>
			<div class="padding-lg">
				<el-input v-model="textarea" :rows="5" type="textarea" placeholder="请输入描述" />
			</div>

			<div class="flex justify-end align-end padding-lg">
				<span class="margin-right">修改参数后，需要点保存才生效</span>
				<el-button type="primary" class="btn-bg-blue" size="large" @click="save" style="width: 140px; height: 50px; font-size: 18px;">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	const weightValue = ref('')
	const weightList = ref([{
		name: '头坯',
		num: '0',
		type: false,
	}, {
		name: '尾坯',
		num: '0',
		type: false,
	}, {
		name: '采样坯',
		num: '0',
		type: false,
	}, {
		name: '度坯',
		num: '0',
		type: false,
	}, {
		name: '其他损失',
		num: '0',
		type: false,
	}])

	const weightClick = (item) => {
		const fig = JSON.parse(JSON.stringify(item.type))
		if (item.type) {
			//保存
			if (weightValue.value) item.num = weightValue.value
		} else {
			//编辑
			weightValue.value = ''
		}

		weightList.value.forEach(item => {
			item.type = false
		})
		item.type = !fig
	}

	const num1 = ref(206.9)
	const num2 = ref(27.5)
	const num3 = ref(75.4)
	const num4 = ref(25.4)

	const selectVal1 = ref('是')
	const selectVal2 = ref('是')
	const selectVal3 = ref('否')
	const textarea = ref('')

	const options = ref([{
		value: '是',
		label: '是',
	}, {
		value: '否',
		label: '否',
	}])

	//保存
	const save = () => {

	}
</script>

<style lang="scss" scoped>
	.produc-l {
		flex-basis: 34%;
	}

	.time-title {
		flex: 0 0 120px;
	}

	.time-title2 {
		flex: 0 0 100px;
	}

	.produc-r-l {
		flex-basis: 41%;
		min-width: 250px;
	}

	.produc-r-r-tb {
		height: 34px;
		line-height: 32px;
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 4px;
	}

	.produc-input {
		width: 100%;
		background-color: transparent;
		text-align: center;
		border: none;
	}
</style>